<!DOCTYPE html>
<!--suppress ALL-->
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <base th:href="@{/}"><!-- 不用base就使用th:src="@{/js/jquery.min.js} -->
    <meta charset="utf-8" />
    <title>cart</title>
    <link rel="stylesheet" type="text/css" href="css/public.css"/>
    <link rel="stylesheet" type="text/css" href="css/proList.css" />
</head>
<body>
<!--------------------------------------cart--------------------->
<div class="head ding">
    <div class="wrapper clearfix">
        <div class="clearfix" id="top">
            <h1 class="fl"><a href="index.html"><img src="img/logo.png"/></a></h1>
            <div class="fr clearfix" id="top1">
                <p class="fl">
                    <a href="login.html" id="login">登录</a>
                    <a href="reg.html" id="reg">注册</a>
                </p>
                <form action="#" method="get" class="fl">
                    <input type="text" placeholder="搜索" />
                    <input type="button" />
                </form>
                <div class="btn fl clearfix">
                    <a href="mygxin.html"><img src="img/grzx.png"/></a>
                    <a href="#" class="er1"><img src="img/ewm.png"/></a>
                    <a href="cart.html"><img src="img/gwc.png"/></a>
                    <p><a href="#"><img src="img/smewm.png"/></a></p>
                </div>
            </div>
        </div>
        <ul class="clearfix" id="bott">
            <li><a href="index.html">首页</a></li>
            <li>
                <a href="#">所有商品</a>
                <div class="sList">
                    <div class="wrapper  clearfix">
                        <a href="paint.html">
                            <dl>
                                <dt><img src="img/nav1.jpg"/></dt>
                                <dd>浓情欧式</dd>
                            </dl>
                        </a>
                        <a href="paint.html">
                            <dl>
                                <dt><img src="img/nav2.jpg"/></dt>
                                <dd>浪漫美式</dd>
                            </dl>
                        </a>
                        <a href="paint.html">
                            <dl>
                                <dt><img src="img/nav3.jpg"/></dt>
                                <dd>雅致中式</dd>
                            </dl>
                        </a>
                        <a href="paint.html">
                            <dl>
                                <dt><img src="img/nav6.jpg"/></dt>
                                <dd>简约现代</dd>
                            </dl>
                        </a>
                        <a href="paint.html">
                            <dl>
                                <dt><img src="img/nav7.jpg"/></dt>
                                <dd>创意装饰</dd>
                            </dl>
                        </a>
                    </div>
                </div>
            </li>
            <li>
                <a href="flowerDer.html">装饰摆件</a>
                <div class="sList2">
                    <div class="clearfix">
                        <a href="proList.html">干花花艺</a>
                        <a href="vase_proList.html">花瓶花器</a>
                    </div>
                </div>
            </li>
            <li>
                <a href="decoration.html">布艺软饰</a>
                <div class="sList2">
                    <div class="clearfix">
                        <a href="zbproList.html">桌布罩件</a>
                        <a href="bzproList.html">抱枕靠垫</a>
                    </div>
                </div>
            </li>
            <li><a href="paint.html">墙式壁挂</a></li>
            <li><a href="perfume.html">蜡艺香薰</a></li>
            <li><a href="idea.html">创意家居</a></li>
        </ul>
    </div>
</div>
<div class="cart mt">
    <!-----------------logo------------------->
    <!--<div class="logo">
        <h1 class="wrapper clearfix">
            <a href="index.html"><img class="fl" src="img/temp/logo.png"></a>
            <img class="top" src="img/temp/cartTop01.png">
        </h1>
    </div>-->
    <!-----------------site------------------->
    <div class="site">
        <p class=" wrapper clearfix">
            <span class="fl">购物车</span>
            <img class="top" src="img/temp/cartTop01.png">
            <a th:href="@{/}" class="fr">继续购物&gt;</a>
        </p>
    </div>
    <!-----------------table------------------->
    <div class="table wrapper">
        <div class="tr">
            <div>商品</div>
            <div>单价</div>
            <div>数量</div>
            <div>小计</div>
            <div>操作</div>
        </div>

        <!--购物车记录start-->
        <span style="color: red; font-size: 60px; margin-left: 35%" th:if="${shopcarNull}==0">购物车空空如也！</span>
        <div class="th" th:each="shopcar :${shopCars}">
            <div class="pro clearfix">
                <label class="fl">
                    <input type="checkbox" id="carId" onclick="onClickHander(this)" class="ckitem" th:value="${shopcar.carId}"/>
                    <span></span>
                </label>
                <input type="hidden" id="productId" th:value="${shopcar.proId}"/>
                <a class="fl" href="#">
                    <dl class="clearfix">
                        <dt class="fl"><img style="width: 80px;height: 80px;" th:src="'img/' + ${shopcar.proPhoto}"></dt>
                        <dd class="fl">
                            <p th:text="${shopcar.proName}"></p>
                            <p>类型:</p>
                            <p th:text="${shopcar.proType}"></p>
                        </dd>
                    </dl>
                </a>
            </div>
            <div id="price" class="price" th:text="${shopcar.price}"></div>
            <div class="number">
                <p class="num clearfix">
                    <img id="subQuantity" class="fl sub" src="img/temp/sub.jpg">
                    <span id="quantity" class="fl" th:text="${shopcar.quantity}"></span>
                    <img id="addQuantity" class="fl add" src="img/temp/add.jpg">
                </p>
            </div>
            <div class="price sAll" th:text="${shopcar.total}"></div>
            <div class="price"><a th:href="'javascript:deleted('+ ${shopcar.carId} +')'">删除</a></div>
        </div>
        <!--购物车记录end-->

        <div class="goOn">空空如也~<a href="">去逛逛</a></div>
        <div class="tr clearfix">
            <label class="fl">
                <input class="checkAll" type="checkbox"/>
                <span></span>
            </label>
            <p class="fl">
                <a>全选</a>
                <a th:href="'javascript:DeleteSelShopCar()'">删除</a>
            </p>
            <p class="fr">
                <span>共<small id="sl">0</small>件商品</span>
                <span>合计:&nbsp;<small id="all">0.00</small></span>
                <a id="settlement" class="count">结算</a>
            </p>
        </div>
    </div>
</div>
<div class="mask"></div>
<div class="tipDel">
    <p>确定要删除该商品吗？</p>
    <p class="clearfix">
        <a class="fl cer" href="#">确定</a>
        <a class="fr cancel" href="#">取消</a>
    </p>
</div>
<!--返回顶部-->
<div class="gotop">
    <a href="cart.html">
        <dl>
            <dt><img src="img/gt1.png"/></dt>
            <dd>去购<br />物车</dd>
        </dl>
    </a>
    <a href="#" class="dh">
        <dl>
            <dt><img src="img/gt2.png"/></dt>
            <dd>联系<br />客服</dd>
        </dl>
    </a>
    <a href="mygxin.html">
        <dl>
            <dt><img src="img/gt3.png"/></dt>
            <dd>个人<br />中心</dd>
        </dl>
    </a>
    <a href="#" class="toptop" style="display: none;">
        <dl>
            <dt><img src="img/gt4.png"/></dt>
            <dd>返回<br />顶部</dd>
        </dl>
    </a>
    <p>400-800-8200</p>
</div>
<!--footer-->
<div class="footer">
    <div class="top">
        <div class="wrapper">
            <div class="clearfix">
                <a href="#2" class="fl"><img src="img/foot1.png"/></a>
                <span class="fl">7天无理由退货</span>
            </div>
            <div class="clearfix">
                <a href="#2" class="fl"><img src="img/foot2.png"/></a>
                <span class="fl">15天免费换货</span>
            </div>
            <div class="clearfix">
                <a href="#2" class="fl"><img src="img/foot3.png"/></a>
                <span class="fl">满599包邮</span>
            </div>
            <div class="clearfix">
                <a href="#2" class="fl"><img src="img/foot4.png"/></a>
                <span class="fl">手机特色服务</span>
            </div>
        </div>
    </div>
    <p class="dibu">最家家居&copy;2013-2017公司版权所有 京ICP备080100-44备0000111000号<br />
        违法和不良信息举报电话：188-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
</div>
<!----------------mask------------------->
<div class="mask"></div>
<!-------------------mask内容------------------->
<div class="proDets">
    <img class="off" src="img/temp/off.jpg" />
    <div class="proCon clearfix">
        <div class="proImg fr">
            <img class="list" src="img/temp/proDet.jpg"  />
            <div class="smallImg clearfix">
                <img src="img/temp/proDet01.jpg" data-src="img/temp/proDet01_big.jpg">
                <img src="img/temp/proDet02.jpg" data-src="img/temp/proDet02_big.jpg">
                <img src="img/temp/proDet03.jpg" data-src="img/temp/proDet03_big.jpg">
                <img src="img/temp/proDet04.jpg" data-src="img/temp/proDet04_big.jpg">
            </div>
        </div>
        <div class="fl">
            <div class="proIntro change">
                <p>颜色分类</p>
                <div class="smallImg clearfix">
                    <p class="fl on"><img src="img/temp/prosmall01.jpg" alt="白瓷花瓶+20支快乐花" data-src="img/temp/proBig01.jpg"></p>
                    <p class="fl"><img src="img/temp/prosmall02.jpg" alt="白瓷花瓶+20支兔尾巴草" data-src="img/temp/proBig02.jpg"></p>
                    <p class="fl"><img src="img/temp/prosmall03.jpg" alt="20支快乐花" data-src="img/temp/proBig03.jpg"></p>
                    <p class="fl"><img src="img/temp/prosmall04.jpg" alt="20支兔尾巴草" data-src="img/temp/proBig04.jpg"></p>
                </div>
            </div>
            <div class="changeBtn clearfix">
                <a href="#2" class="fl"><p class="buy">确认</p></a>
                <a href="#2" class="fr"><p class="cart">取消</p></a>
            </div>
        </div>
    </div>
</div>
<div class="pleaseC">
    <p>请选择宝贝</p>
    <img class="off" src="img/temp/off.jpg" />
</div>
<script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/public.js" type="text/javascript" charset="utf-8"></script>
<script src="js/pro.js" type="text/javascript" charset="utf-8"></script>
<script src="js/cart.js" type="text/javascript" charset="utf-8"></script>
<script src="layui/layui.js"></script>
<script>
    //按carId删除购物车记录
    function deleted(carId) {
        layer.confirm("是否确定删除", {btn: ['确定', '取消']}, function (index) {
            $.post("/furniture/trade/deleteShopCarByCarId", {"carId": carId}, function (data) {
                if (data.state == 200){
                    layer.msg(data.message);
                    location.reload();
                }else {
                    layer.msg(data.message);
                }
            });
            layer.close(index);
        },function () {

        });

    }

    //批量删除购物车记录
    function DeleteSelShopCar() {
        //遍历所有按钮
        var carId = new Array();
        for (var i = $(".ckitem").length - 1; i >= 0; i--) {
            //如果选中
            if ($(".ckitem")[i].checked) {
                //删除
                //$($(".ckitem")[i]).parents("tr").remove();
                carId.push($(".ckitem")[i].value);
            }
        }
        console.log(carId);
        var param = carId;

        layer.confirm("是否确定删除", {btn: ['确定', '取消']}, function (index) {

            $.ajax({
                type: "post",
                url: "/furniture/trade/deleteBatchShopCar",
                data: JSON.stringify(param),
                dataType: "json",
                contentType : 'application/json',
                success:function (data) {
                    if (data.state == 200){
                        layer.msg(data.message);
                        location.reload();
                    }else {
                        layer.msg(data.message);
                    }
                }
            });

            layer.close(index);
        },function () {

        });
    }

    /*$("#subQuantity").click(function () {
        var carId = $("#carId").val();
        var productId = $("#productId").val();
        var quantity = parseInt($("#quantity").html()) - 1;

        var param = {"carId": carId, "productId": productId, "quantity": quantity};
        $.post("/furniture/trade/modifyQuantity", param, function (data) {
            if (data.state == 200){
                console.log(data.message);
            }else{
                console.log(data.message);
            }
        })
    });

    $("#addQuantity").click(function () {
        var carId = $("#carId").val();
        var productId = $("#productId").val();
        var quantity = parseInt($("#quantity").html()) + 1;

        var param = {"carId": carId, "productId": productId, "quantity": quantity};
        $.post("/furniture/trade/modifyQuantity", param, function (data) {
            if (data.state == 200){
                console.log(data.message);
            }else{
                console.log(data.message);
            }
        })
    });*/

    function onClickHander(obj) {
        var carId = $(obj).val();
        var productId = $("#productId").val();
        var quantity = parseInt($("#quantity").html());

        var param = {"carId": carId, "productId": productId, "quantity": quantity};
        $.post("/furniture/trade/modifyQuantity", param, function (data) {
            if (data.state == 200){
                console.log(data.message);
            }else{
                console.log(data.message);
            }
        })

    }

    $("#settlement").click(function () {
        var totalMoney = $("#all").html();
        var carId = new Array();
        for (var i = $(".ckitem").length - 1; i >= 0; i--) {
            //如果选中
            if ($(".ckitem")[i].checked) {
                //删除
                carId.push($(".ckitem")[i].value);
            }
        }
        console.log(carId);
        layer.confirm("是否确定结算", {btn: ['确定', '取消']}, function (index) {

           location.href = "/furniture/trade/toGenerateOrderPage?carId=" + carId + "&totalMoney=" + totalMoney;

            layer.close(index);
        },function () {

        });
    });

</script>
</body>
</html>